<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Play Video</title>
    <style>
        .container {
            width: 7em;
            height: 7em;
            position: relative;
        }

        .button {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px solid #090909;
            background-color: transparent;
            background-image: linear-gradient(145deg, #171717, #444245);
            box-sizing: border-box;
            box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container input {
            display: none;
        }

        .button::before {
            position: absolute;
            content: "";
            width: 7.25em;
            height: 7.25em;
            border-radius: inherit;
            background-color: transparent;
            background-image: linear-gradient(145deg, #262626, #606060);
            z-index: -1;
            box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;
        }

        .button .icon {
            width: 60px;
            height: 60px;
            display: inline-block;
        }

        .button .icon svg {
            height: 100%;
            width: 100%;
            fill: #a5a5a5;
        }

        .container input:checked+.button {
            box-shadow: inset -2px -2px 0 #5e5e5e, inset 2px 2px 0 #1c1c1c;
            border: 4px solid rgb(0, 215, 0);
            animation: animeBorder 0.3s linear alternate-reverse infinite;
        }

        .container input:checked+.button .icon svg {
            fill: rgb(0, 215, 0);
            animation: animeFill 0.3s linear alternate-reverse infinite;
        }

        @keyframes animeFill {
            to {
                fill: rgba(0, 194, 0, 0.954);
            }
        }

        @keyframes animeBorder {
            to {
                border-color: rgba(0, 175, 0, 0.878);
            }
        }
    </style>
</head>

<body style="text-align: center; padding: 5% 5%; background-color: #212121;">
    <video id="remoteVideo" width="100%" height="auto" autoplay controls></video>
    <div class="container" style="margin-top: 10%; margin-left: 43.5%;">
        <input type="checkbox" id="checkbox" />
        <label for="checkbox" class="button" onclick="startPlay()">
            <span class="icon">
                <svg data-darkreader-inline-fill="" style="--darkreader-inline-fill: #000000;" fill=""
                    xml:space="preserve" viewBox="0 0 30.143 30.143" xmlns:xlink="http://www.w3.org/1999/xlink"
                    xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1" width="200px" height="200px">
                    <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
                    <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
                    <g id="SVGRepo_iconCarrier">
                        <g>
                            <path data-darkreader-inline-fill=""
                                d="M20.034,2.357v3.824c3.482,1.798,5.869,5.427,5.869,9.619c0,5.98-4.848,10.83-10.828,10.83 c-5.982,0-10.832-4.85-10.832-10.83c0-3.844,2.012-7.215,5.029-9.136V2.689C4.245,4.918,0.731,9.945,0.731,15.801 c0,7.921,6.42,14.342,14.34,14.342c7.924,0,14.342-6.421,14.342-14.342C29.412,9.624,25.501,4.379,20.034,2.357z">
                            </path>
                            <path data-darkreader-inline-fill=""
                                d="M14.795,17.652c1.576,0,1.736-0.931,1.736-2.076V2.08c0-1.148-0.16-2.08-1.736-2.08 c-1.57,0-1.732,0.932-1.732,2.08v13.496C13.062,16.722,13.225,17.652,14.795,17.652z">
                            </path>
                        </g>
                    </g>
                </svg>
            </span>
        </label>
    </div>

        <script>
            let websocket;
            const queue = [];
            let buffer;
            const wsUrl = "ws://localhost:8081?id=2";
            function startPlay() {
                const websocket = new WebSocket(wsUrl);
                websocket.binaryType = 'arraybuffer';
                setTimeout(play, 2000);

                websocket.addEventListener('message', function (e) {
                    if (typeof e.data !== 'string') {
                        if (buffer.updating || queue.length > 0) {
                            queue.push(e.data);
                        } else {
                            console.log('data', e.data);
                            buffer.appendBuffer(e.data);
                        }
                    }
                }, false);

                websocket.addEventListener('open', function (e) {
                    console.log("send message to record restart")
                    websocket.send(JSON.stringify({ toId: 1, content: "restart" }));
                }, false);
            }


            function play() {
                const mediaSource = new MediaSource();
                const video = document.getElementById('remoteVideo');
                video.src = window.URL.createObjectURL(mediaSource);

                mediaSource.addEventListener('sourceopen', function (e) {
                    //video.play();
                    //const mimeType = 'video/mp4; codecs="avc1.64001E, mp4a.40.5"';
                    const mimeType = 'video/webm; codecs="vp8, opus"';
                    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeType)) {
                        buffer = mediaSource.addSourceBuffer(mimeType);

                        buffer.addEventListener('updatestart', function (e) {
                            console.log('updatestart: ' + mediaSource.readyState);
                        });
                        buffer.addEventListener('update', function (e) {
                            console.log('update: ' + mediaSource.readyState);
                        });
                        buffer.addEventListener('updateend', function (e) {
                            console.log('updateend: ' + mediaSource.readyState);
                        });
                        buffer.addEventListener('error', function (e) {
                            console.log('error: ' + mediaSource.readyState);
                        });
                        buffer.addEventListener('abort', function (e) {
                            console.log('abort: ' + mediaSource.readyState);
                        });

                        buffer.addEventListener('update', function () { // Note: Have tried 'updateend'
                            if (queue.length > 0 && !buffer.updating) {
                                buffer.appendBuffer(queue.shift());
                            }
                        });
                    } else {
                        console.error('Mimetype not supported', mimeType);
                        alert('Unsupported MIME type or codec: ', mimeType);
                    }

                }, false);

                mediaSource.addEventListener('sourceended', function (e) {
                    console.log('sourceended: ' + mediaSource.readyState);
                });
                mediaSource.addEventListener('sourceclose', function (e) {
                    console.log('sourceclose: ' + mediaSource.readyState);
                });
                mediaSource.addEventListener('error', function (e) {
                    console.log('error: ' + mediaSource.readyState);
                });
            }

        </script>
</body>

</html>